<template>
	<view class="container">
		<!-- 搜索栏 -->
		<Search @click="handleNavigatoSearch" />
		<!-- 轮播图 -->
		<view class="swiper">
			<ASwiper :list="list" />
		</view>
		<!-- 菜单 -->
		<AMenu 
			:list="menuList" 
			:width="100" 
			:height="100" 
			@click="handleNavigateTo" />
		<!-- 横向导航栏 -->
		<u-sticky bg-color="#f5f5f5" index="1" @fixed="handleFixed">
			<!-- 只能有一个根元素 -->
			<view class="sticky">
				<Nav @handleChangeTab="handleChangeTab" @screen="handleScreen" />
				<ResultList :width="140" :height="60" :list="resultList" @click="handleDelete" v-if="resultList.length > 0" />
			</view>
		</u-sticky>
		<!-- 内容栏 -->
		<view>
			<ProductList :productList="productList" @clickFun="send" />
			<u-loadmore 
				:status="status" 
				:load-text="loadText"
				 margin-top="20"
				 margin-bottom="20" />
		</view>
		<!-- 筛选 -->
		<u-popup 
			v-model="popShow"
			mode="center"
			width="680"
			border-radius="10">
			<ScreenList @click="handleConfirm" />
		</u-popup>
		<!-- tabbar -->
		<!-- <tabbarList /> -->
	</view>
</template>

<script>
import Search from '@/components/search/index.vue'
import ASwiper from '@/components/swiper/index.vue'
import AMenu from '@/components/menu/index.vue'
import Nav from '@/components/nav/index.vue'
import ProductList from '@/components/product-list/index.vue'
import ScreenList from '@/components/screen-list/index.vue'
import ResultList from '@/components/result-list/index.vue'
// import tabbarList from '@/components/tabbar-list/index.vue'
export default {
	components: {
		Search,
		ASwiper,
		AMenu,
		Nav,
		ProductList,
		ScreenList,
		ResultList
		// tabbarList
	},
	data() {
		return {
			status: 'loading',
			popShow: false,
			popMode: 'center',
			popBorderRadius: '20',
			resultList: [],
			loadText: {
				loadmore: '上拉加载更多',
				loading: '加载中...',
				nomore: '我也是有底线的~'
			},
			list: [
				{
					image: 'http://img51.ddimg.cn/79140117347201_y.jpg'
				},
				{
					image: 'http://img62.ddimg.cn/upload_img/00785/ts0219_0309/1242x366-1613634235.jpg'
				}
			],
			menuList: [
				{
					id: 1,
					name: '抖音达人',
					url: require('@/static/icons/douyin_icon.png')
				},
				{
					id: 2,
					name: '小红书达人',
					url: require('@/static/icons/xiaohongshu_icon.png')
				},
				{
					id: 3,
					name: '微博达人',
					url: require('@/static/icons/weibo_icon.png')
				},
				{
					id: 4,
					name: '快手达人',
					url: require('@/static/icons/kuaishou_icon.png')
				}
			],
			productList: [
				{
					id: 1,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					brand_name: '品牌名称',
					fans_ask: '5000+',
					ckecked: '2000查看/1天前',
					source: '抖音'
				},
				{
					id: 2,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					brand_name: '品牌名称',
					fans_ask: '5000+',
					ckecked: '2000查看/1天前',
					source: '抖音'
				},
				{
					id: 3,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					brand_name: '品牌名称',
					fans_ask: '5000+',
					ckecked: '2000查看/1天前',
					source: '抖音'
				},
				{
					id: 4,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					brand_name: '品牌名称',
					fans_ask: '5000+',
					ckecked: '2000查看/1天前',
					source: '抖音'
				},
				{
					id: 5,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					brand_name: '品牌名称',
					fans_ask: '5000+',
					ckecked: '2000查看/1天前',
					source: '抖音'
				}
			],
			scrollTopDis: 0,
			keepScrollTop: 0
		}
	},
	onLoad() {
		
	},
	onPageScroll(obj) {
		// console.log(obj)
		this.scrollTopDis = obj.scrollTop
	},
	onReachBottom() {
		// console.log('到底了')
		if(this.isTrue) return
		if(this.productList.length < 20) {
			this.status = 'loading'
		}
		setTimeout(() => {
			if(this.productList.length >= 20) {
				this.status = 'nomore'
				return
			}
			this.productList = this.productList.concat(this.productList)
			this.status = 'loading'
		}, 2000)
	},
	methods: {
		send(e){
			uni.navigateTo({
				url: '/pages/index/details'
			})
		},
		handleNavigateTo(item) {
			console.log(item)
		},
		handleFixed(index) {
			// console.log(this.scrollTopDis, '吸顶')
			this.keepScrollTop = this.scrollTopDis
		},
		handleChangeTab() {
			uni.pageScrollTo({
				scrollTop: this.keepScrollTop,
				duration: 300
			})
		},
		handleScreen() {
			this.popShow = true
		},
		handleConfirm(list) {
			this.resultList = list
			this.popShow = false
		},
		handleDelete(item) {
			this.resultList.splice(this.resultList.findIndex(option => option.id === item.id), 1)
		},
		// 跳转搜索
		handleNavigatoSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	.swiper {
		background-color: $u-bg-white-color;
		padding: 14rpx 25rpx 0;
	}
}
</style>
